<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<title>基于SpringBoot选课推荐交流平台</title>
<meta name="keywords" content="选课推荐交流平台" />
<meta name="baidu_union_verify"
	content="6323e68566d3ece6ec4ec79996242a47" />
<link rel="shortcut icon" href="/static/foreground/images/logo.png"
	type="image/x-icon" />
<!--Layui-->
<link href="/static/foreground/layui/css/layui.css" rel="stylesheet" />
<!--font-awesome-->
<link href="/static/foreground/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />
<!--全局样式表-->
<link href="/static/foreground/css/global.css" rel="stylesheet" />
<link href="/static/foreground/css/animate.min.css" rel="stylesheet" />
<!-- 本页样式表 -->
<link href="/static/foreground/css/index.css" rel="stylesheet" />
<link href="/static/css/blog.css" rel="stylesheet" />
<link rel="stylesheet" href="/static/APlayer/APlayer.min.css">

</head>
<body>
	<!-- 导航 -->
	<div th:replace="common/head::#h"></div>
	<!-- 用户登陆 -->
	<div class="blog-user"></div>
	<!-- 主体（一般只改变这里的内容） -->
	<div class="blog-body">
		<div class="layui-carousel blog-bg" id="carousel">
			<div carousel-item="">
				<div class="bg bg_a"></div>
				<div class="bg bg_b"></div>
				<div class="bg bg_c"></div>
				<div class="bg bg_d"></div>
				<div class="bg bg_e"></div>
			</div>
		</div>
		<div class="blog-container">
			<div class="blog-main">
				<!-- 网站公告提示 -->
				<div class="home-tips shadow">
					<i style="float: left; line-height: 17px;" class="fa fa-volume-up"></i>
					<div class="home-tips-container">
						<span th:each="n : ${session.noticeList}" style="color: #009688"
							th:utext="${n.content}"></span>
					</div>
				</div>
				<!--左边笔记列表-->
				<div class="blog-main-left animated slideInLeft">
					<div class="flow-default">
					   <form class="layui-form" id="edit_form" isLoad="1" action="/save">
	  <input type="hidden" name="userId" th:value="${user.userId}"/>
    <!-- <input type="hidden" name="registrationDate" th:value="${user.registrationDate}"/> -->
    <input type="hidden" name="openId" th:value="${user.openId}"/>
    
	  <div class="layui-form-item" style="width: 800px;">
	    <label class="layui-form-label">用户名</label>
	    <div class="layui-input-block">
	      <input type="text" name="username" required="" lay-verType="tips" lay-verify="required" th:value="${user.username}"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item" style="width: 800px;">
	    <label class="layui-form-label">密码</label>
	    <div class="layui-input-block">
	      <input type="text" name="password" required="" lay-verType="tips" lay-verify="required"  th:value="${user.password}" autocomplete="off" class="layui-input"/>
	    </div>
	  </div>
	  
	  <div class="layui-form-item" style="width: 800px;">
	    <label class="layui-form-label">昵称</label>
	    <div class="layui-input-block">
	      <input type="text" name="nickname" required="" lay-verType="tips" lay-verify="required"  th:value="${user.nickname}" autocomplete="off" class="layui-input"/>
	    </div>
	  </div>
		
		
	  
	  <div class="layui-form-item" style="width: 800px;">
	    <label class="layui-form-label">性别</label>
	    <div class="layui-input-block">
	      <input type="text" name="sex" required="" lay-verType="tips" th:value="${user.sex}" lay-verify="required"  autocomplete="off" class="layui-input"/>
	    </div>
	  </div>
    
    <div class="layui-form-item" style="width: 800px;">
      <label class="layui-form-label">生日：</label>
      <div class="layui-input-block" style="">
        <input type="text" name="birthday" autocomplete="off" th:value="${user.birthday}" class="layui-input" id="birthday" placeholder=" - "/>
      </div>
    </div>
	  
    <div class="layui-form-item" style="width: 800px;">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-block">
        <input type="text" name="phone" required="" lay-verType="tips" th:value="${user.phone}" lay-verify="required"  autocomplete="off" class="layui-input"/>
      </div>
    </div>
    
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="test1">上传图片</button>
      <div class="layui-upload-list">
        <p id="demoText"></p>
      </div>
    </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <img class="layui-upload-img" id="demo1" style="width: 250px;height: 150px;" />
      </div>
    </div>
    <input type="hidden" id="headPortrait" name="headPortrait" th:value="${user.headPortrait}"/>
    <div class="layui-form-item" style="width: 800px;">
      <label class="layui-form-label">签名</label>
      <div class="layui-input-block">
        <input type="text" name="momo" required="" lay-verType="tips" th:value="${user.momo}" lay-verify="required"  autocomplete="off" class="layui-input"/>
      </div>
    </div>
	  <hr/>
	  <div class="layui-form-item" style="margin-left: 100px;">
     	 <button class="layui-btn" type="submit">保存</button>
    </div>
</form>
					</div>
				</div>
				
	<!-- 底部 -->
	<div th:replace="common/foot::#f"></div>
	<!--侧边导航-->
	<ul
		class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
		lay-filter="nav">
		<li class="layui-nav-item layui-this"><a href="/"><i
				class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
		<li class="layui-nav-item"><a href="/foreground/article"><i
				class="fa fa-file-text fa-fw"></i>&nbsp;选课推荐专栏</a></li>
		<li class="layui-nav-item"><a href="/foreground/mixed_pic"><i
				class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a></li>
		<li class="layui-nav-item"><a href="/foreground/timeline"><i
				class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a></li>
		
	</ul>
	<!--分享窗体-->
	<div class="blog-share layui-hide">
		<div class="blog-share-body">
			<div style="width: 200px; height: 100%;">
				<div class="bdsharebuttonbox">
					<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a
						class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a
						class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> <a
						class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
				</div>
			</div>
		</div>
	</div>

	<!--遮罩-->
	<div class="blog-mask animated layui-hide"></div>
	<!--Aplayer音乐播放器  -->
	<!-- <div id="aplayer"></div> -->
	<!-- jquery -->
	<script src="/static/foreground/js/jquery.min.js"></script>
	<!-- layui.js -->
	<script src="/static/foreground/layui/layui.js"></script>
	<!-- 全局脚本 -->
	<script src="/static/foreground/js/global.js"></script>
	<script src="/static/foreground/js/canvas-particle.js"></script>
	<!-- 本页脚本 -->
	<script src="/static/foreground/js/index.js"></script>
	<script src="/static/js/blog.js"></script>
	<!-- APlayer音乐播放器 -->
	<script src="/static/APlayer/APlayer.min.js"></script>

	<!-- 天气预报 -->
	<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
	<script>tpwidget("init", {
	    "flavor": "bubble",
	    "location": "WSBQ3F31E8P0",
	    "geolocation": "enabled",
	    "position": "top-right",
	    "margin": "68px 30px",
	    "language": "zh-chs",
	    "unit": "c",
	    "theme": "chameleon",
	    "uid": "U1B01FCCC9",
	    "hash": "42ba05e92ec7ec1a1fe68b1e93b32f89"
	});
	tpwidget("show");</script>

	<script th:inline="javascript">
		/*<![CDATA[*/
			$(function(){
				$.ajax({
					url:"/foreground/musicList",
					dataType:"json",
					type:"post",
					success:function(data){
						if(data.success == 1){
							//初始化播放器
							const ap = new APlayer({
							    container: document.getElementById('aplayer'),
							    fixed: true,
							    autoplay: true,
							    audio: data.data
							});
						}else{
							layer.msg("音乐加载失败！");
						}
					}
				})
		    }) ;
		
		/*]]>*/ 
	</script>

	<!-- 默认选中网站首页 -->
	<script type="text/javascript"> 
	    $(document).ready(function() {
	        $(".fa-home").parent().parent().addClass("layui-this");
	    });
	</script>

	<script th:inline="javascript">
	/*<![CDATA[*/
		
		layui.use('layer', function(){
		  var layer = layui.layer;
		  
		  //mouseover（）鼠标悬停事件 //this当前DOM节点对象，即id为QQjl的DOM节点对象
		  $("#QQjl").mouseover(function(){
		  	layer.tips('QQ交流', this,{
		  		tips: 1
		  	});
			});
		  $("#gwxx").mouseover(function(){
			  	layer.tips('给我写信', this,{
			  		tips: 1
			  	});
				});
		  $("#xlwb").mouseover(function(){
			  	layer.tips('新浪微博', this,{
			  		tips: 1
			  	});
				});
		  $("#htgl").mouseover(function(){
			  	layer.tips('后台管理', this,{
			  		tips: 1
			  	});
				});
		});              
      
		
		function delHtmlTag(str){
			return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
		}
	
		//新闻列表遍历
		layui.use('flow', function(){
			  var flow = layui.flow;
			 
			  flow.load({
			    elem: '#parentArticleList' //流加载容器
			    ,done: function(page, next){ //执行下一页的回调
			    	setTimeout(function(){
			    	$.post("/admin/article/list",{page:page,pageSize:5}, function(data) {
			    		 	var lis = [];
					        for(var i = 0; i < data.data.length; i++){
					        	var content=delHtmlTag(data.data[i].content);//取出笔记内容（去掉html标签）
					        	if(content.length>=80){
					        		content=content.substring(0,86);
					        	}
					          lis.push("<div class=\"article shadow animated zoomIn\">\n" + 
					  				"                		<div class=\"article-left \">\n" + 
									"                			<img src=\"/static/images/"+data.data[i].imageName+"\" alt=\""+data.data[i].title+"\"/>\n" + 
									"                		</div>\n" + 
									"                		<div class=\"article-right\">\n" + 
									"                        	<div class=\"article-title\">\n");
					          if(data.data[i].isTop==1){
					        	  lis.push("<span class=\"article_is_top\">置顶</span>&nbsp;");
					          }
					          if(data.data[i].isOriginal==1){
					        	  lis.push("<span class=\"article_is_yc\">原创</span>&nbsp;");
					          }else{
					        	  lis.push("<span class=\"article_is_zz\">转载</span>&nbsp;");
					          }
					       lis.push("                        		<a href=\"/foreground/detail/"+data.data[i].articleId+"\">"+data.data[i].title+"</a>\n" + 
									"                        	</div>\n" + 
									"                        	<div class=\"article-abstract\">\n" + 
									"                          	"+content+"</div>\n" + 
									"                        </div>\n" + 
									"                        <div class=\"clear\"></div>\n" + 
									"                        <div class=\"article-footer\">\n" + 
									"	                        <span><i class=\"fa fa-clock-o\"></i>&nbsp;&nbsp;"+data.data[i].publishDate+"</span>\n" + 
									"	                        <span class=\"article-author\"><i class=\"fa fa-user\"></i>&nbsp;&nbsp; "+data.data[i].author+"</span>\n" + 
									"	                        <span><i class=\"fa fa-tag\"></i>&nbsp;&nbsp;<a href=\"javascript:classifyList("+data.data[i].classify.classifyId+");\"> "+data.data[i].classify.classifyName+"</a></span>\n" + 
									"	                        <span class=\"article-viewinfo\"><i class=\"fa fa-eye\"></i>&nbsp;"+data.data[i].click+"</span>\n" + 
									"	                        <span class=\"article-viewinfo\"><i class=\"fa fa-commenting\"></i>&nbsp;"+data.data[i].commentNum+"</span>\n" + 
									"                    	</div>\n" + 
									"                	</div>");
					        }
			    		
			        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
			        next(lis.join(''), page < data.totalPage);
			    	});
			    	});
			    }
			  });
			  
			});
	/*]]>*/ 
</script>
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      $('#headPortrait').val(res.data.filePath); //图片链接（base64）
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});

$(window).load(function(){
  setTimeout(images, 200);
});
function images(){
  var str=$('#headPortrait').val();
   $("#demo1").attr("src","/static/images/"+str);
}
</script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
 
//执行一个laydate实例
laydate.render({
elem: '#birthday' //指定元素
});
});
</script>
</body>
</html>